<template>
	<div class="flex pageview">
		<div class="topBox">
			<a href="javascript:;" class="reback" @click="reback"></a>
			<div class="title">银行活体监管数据总览</div>
			<div class="time flex flex-align-center">
				<img src="/img/dashboard/time.png" alt="" />
				<span>{{ dateTime }}</span>
			</div>
		</div>
		<div class="bottomBox flex-1 flex">
			<div class="leftbox flex flex-v">
				<!-- 监管牧场/抵押牛只 -->
				<div class="firstOne"><mortgage :level="level" :cityId="cityId"></mortgage></div>
				<!-- 抵押金额告警 -->
				<div class="flex-1"><mortgageAlarm :level="level" :cityId="cityId"></mortgageAlarm></div>
				<!-- 实时盘点 -->
				<!-- <div class="thirdOne"><realInventory :level="level" :areaList="areaList" :cityId="cityId"></realInventory></div> -->
				<!-- AI预警 -->
				<div class="lastOne"><aiAlram :level="level" :areaList="areaList" :cityId="cityId"></aiAlram></div>
			</div>
			<div class="centerbox flex-1">
				<div class="top">
					<topTotal :level="level" :cityId="cityId"></topTotal>
				</div>
				<div class="flex-1"><map-box @mapCheck="mapCheck" :level="level"></map-box></div>
				<div class="bottom">
					<border :level="level" :cityId="cityId"></border>
				</div>
			</div>
			<div class="rightbox flex flex-v">
				<!-- 巡检任务 -->
				<div class="flex-1"><inspection :level="level" :areaList="areaList" :cityId="cityId"></inspection></div>
				<!-- 新增用信金额 -->
				<div class="flex-1"><newMoney :level="level" :cityId="cityId"></newMoney></div>
				<!-- 视频监控 -->
				<div class="lastOne"><videoList></videoList></div>
			</div>
		</div>
	</div>
</template>

<script>
import mapBox from './components/bank/mapBox.vue';
import mortgage from './components/bank/leftbox/mortgage.vue';
import aiAlram from './components/bank/leftbox/aiAlram.vue';

import videoList from './components/leftbox/videoList.vue';
import mortgageAlarm from './components/bank/leftbox/mortgageAlarm.vue';
import realInventory from './components/bank/leftbox/realInventory.vue';

import inspection from './components/bank/rightBox/inspection.vue';
import newMoney from './components/bank/rightBox/newMoney.vue';
import topTotal from './components/bank/rightBox/topTotal.vue';
import border from './components/bank/rightBox/border.vue';
export default {
	name: 'governmentScreen',
	components: {
		mortgage,
		videoList,
		mortgageAlarm,
		realInventory,
		mapBox,
		inspection,
		newMoney,
		topTotal,
		aiAlram,
		border
	},
	data() {
		return {
			timer: '',
			dateTime: '',
			level: 1,
			areaList: [],
			cityId: ''
		};
	},
	created() {
		this.timer = null;
		this.dateTime = moment(new Date()).format('YYYY年MM月DD日 HH:mm:ss');
		this.timer = setInterval(() => {
			this.dateTime = moment(new Date()).format('YYYY年MM月DD日 HH:mm:ss');
		}, 1000);
	},
	destroyed() {
		clearInterval(this.timer);
	},
	mounted() {
		window.addEventListener('resize', () => {
			//TODO
			this.resize();
		});
	},
	beforeDestroy() {
		window.removeEventListener('resize');
	},
	methods: {
		mapCheck(data) {
			console.log('=====', data);
			this.level = data.level + 1;
			this.cityId = data.cityId;

			this.areaList = data.mapJson.data.map(item => item.name);

			// console.log('=====', this.areaList);
		},
		reback() {
			this.$router.back(-1);
		},
		resize() {
			window.location.reload();
		}
	}
};
</script>

<style scoped lang="less">
.pageview {
	width: 100%;
	height: 100%;
	background: #0e1b29;
	display: flex;
	flex-direction: column;
	.topBox {
		width: 100%;
		height: 0.93rem;
		background: url(/img/dashboard/topwrap.png) no-repeat;
		background-size: cover;
		position: relative;
		.reback {
			display: block;
			width: 1.95rem;
			height: 0.44rem;
			position: absolute;
			top: 0.12rem;
			left: 0.07rem;
			background: url(/img/dashboard/reback.png) no-repeat;
			background-size: cover;
			&:hover,
			&:active {
				background-image: url(/img/dashboard/reback-active.png);
			}
		}
		.time {
			position: absolute;
			top: 0.13rem;
			right: 0.17rem;
			line-height: 0.28rem;
			color: rgba(255, 255, 255, 0.9);
			font-size: 14px;
			font-weight: 500;
			img {
				margin-right: 0.13rem;
			}
		}
	}
	.bottomBox {
		background: #0e1b29 url(/img/dashboard/bg.jpg) no-repeat center bottom;
		background-size: cover;
		.leftbox {
			padding-left: 0.15rem;
			&::before {
				left: 0;
				background: linear-gradient(90deg, #02081b 0%, #061230 88%, rgba(3, 15, 46, 0) 100%);
			}
			// & > div + div {
			//   margin-top: 10px;
			// }
		}
		.rightbox {
			padding-right: 0.15rem;
			padding-left: 0.15rem;
			&::before {
				right: 0;
				background: linear-gradient(-90deg, #02081b 0%, #061230 88%, rgba(3, 15, 46, 0) 100%);
			}
		}
		.leftbox,
		.rightbox {
			width: 5.27rem;
			position: relative;
			&::before {
				position: absolute;
				top: 0;
				content: '';
				display: block;
				width: 6.16rem;
				height: 100%;
			}
			& > div {
				position: relative;
				z-index: 1;
			}
			.lastOne {
				height: 2.5rem;
			}
			.firstOne {
				height: 25%;
			}
			.thirdOne {
				height: 1.6rem;
			}
		}
		.centerbox {
			display: flex;
			flex-direction: column;
			.top {
				width: 100%;
				height: 0.92rem;
				background: url(/img/dashboard/topbg.png) no-repeat;
				background-size: cover;
				display: flex;
				justify-content: center;
			}
			.bottom {
				width: 100%;
				height: 2.5rem;
				/* background: -webkit-gradient(linear, left top, right top, from(#02081b), color-stop(88%, #061230), to(rgba(3, 15, 46, 0))); */
				background: #061230;
				padding: 0 10px;
				z-index: 99;
			}
		}
	}
}
</style>
<style scoped lang="less">
@import './screen.less';
</style>
